import { PageContainer } from '@ant-design/pro-components';
import { Button, Form, Input } from 'antd';

const validateMessages = {
  required: '${label} is required!',
  types: {
    email: '${label} is not a valid email!',
    number: '${label} is not a valid number!',
  },
  number: {
    range: '${label} must be between ${min} and ${max}',
  },
};

const onFinish = (values: any) => {
  console.log(values);
};

const ContentPage: React.FC = () => {
  return (
    <PageContainer ghost>
      <Form
        name="nest-messages"
        onFinish={onFinish}
        style={{ maxWidth: 250 }}
        validateMessages={validateMessages}
      >
        <Form.Item
          name={['user', 'name']}
          label="姓名"
          rules={[{ required: true }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name={['user', 'name']}
          label="年龄"
          rules={[{ required: true }]}
        >
          <Input />
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8 }}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </PageContainer>
  );
};

export default ContentPage;
